<template>
  <div :class='[theme, classAdd]' class="c-flex-row c-justify-sa c-bg-white">
    <div v-for="(item,index) in barList" :key="index" class="c-pv20 c-fs24 c-fc-xblack" :class="typeBar == item.key ? classAddOther : ''" @click="changeType(item.key)">{{item.value}}</div>
  </div>
</template>
<script>
export default {
  name: "TypeBar",
  components: {

  },
  props: {
    barList: {
      type: Array,
      default: () => []
    },
    typeBar: {
      type: Number,
      default: 1
    },
    classAdd: {
      type: String,
      default: '',
    },
    classAddOther: {
      type: String,
      default: 'theme-bd-b2',
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      themeName: localStorage.getItem("themeName") || "mb5",

    };
  },
  methods: {
    changeType: function (type) {
      this.typeBar = type;
      this.$emit("changeKey", type);
    }
  }
};
</script>

<style scoped>
</style>
